<template>
  <div>
    <button @click="toggle">点击切换盒子显示或者隐藏</button>
    <!-- <div class="box" v-show="show">我是等待切换的盒子</div> -->
    <h1>我的年龄：{{ age }} 岁</h1>
    <button @click="age += 10">+10</button>
    <button @click="age -= 10">-10</button>
    <div class="box">
      <h1 v-if="age > 60">60岁以上，跳广场舞</h1>
      <h1 v-else-if="age > 30">30岁以上，搓麻将</h1>
      <h1 v-else-if="age > 20">20岁以上，蹦迪</h1>
      <h1 v-else>20岁以下，唱跳rap篮球</h1>
    </div>
  </div>
</template>

<script>
// v-show切换盒子的显示或者隐藏的时候，通过添加css属性 display:none实现的
// v-if切换盒子的显示或者隐藏的时候，直接删除或者新增当前dom节点

// 1.初始渲染的时候，v-if和v-show的区别
// v-if:如果标识为false，不会创建当前dom节点
// v-show:如果标识为false，会创建节点，但是会通过css属性隐藏盒子

// 2.初始的渲染v-if和v-show谁的性能消耗比较大
// v - show的性能消耗比较大

// 3.频繁切换的时候，谁的性能消耗比较大
// v-if的消耗大，一直需要创建删除dom节点
// v-show消耗比较小·因为只需要通过css控制显示或者隐藏就可以了
export default {
  data() {
    return {
      show: true,
      age: 10,
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    },
    show() {},
  },
}
</script>

<style>
.box {
  width: 400px;
  height: 100px;
  color: aqua;
  border: 1px solid;
}
</style>
